<template>
  <div class="home-container">
      <div class="time_box_detailinfo">
            <div class="time_date">
                <p class="region">中国 china 北京 时间 </p>
                <div class="time">
                    <p class="hour_box">{{nowTime.hour }}</p><span>：</span><p class="minute_box">{{ nowTime.minute }}</p><span>：</span><p class="seconds_box">{{ nowTime.second }}</p>
                </div>
                <span>{{nowDate.year}}年{{ nowDate.month }}月{{ nowDate.day }}日,{{ nowDate.xinqi }}</span>
            </div>
            <div class="detail_info">
                <p><span>所属时区：</span><span>UTC/GMT+8小时（东八区） </span></p>
                <p><span>经度/纬度：</span><span>东经+116°20/ 北纬-39°56 </span></p>
                <p><span>国家区号：</span><span>+86(中国) </span></p>
                <p><span>地区区号:</span><span>10</span></p>
                <p><span>电脑时间:</span><span class="computed_time">{{nowDate.year}}/{{nowDate.month}}/{{nowDate.day}} {{nowTime.hour}}:{{ nowTime.minute }}:{{ nowTime.second }}</span></p>
                <p><span>和北京时间差:</span><span>无差别</span></p>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'HomeIndex',
  data (){
    return {
      nowDate: {}, //存放年月日变量
      nowTime: {}, //存放时分秒变量
      timer: "", //定义一个定时器的变量
      currentTime: new Date(), // 获取当前时间
    }
  },
  created (){
    this.timer = setInterval(this.getTime, 1000);
  },
  //4、离开页面使用beforeDestroy() 销毁
  beforeDestroy() {
    if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
},
  methods: {
    getTime(){
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour= date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        const xinqi = "星期" + "日一二三四五六".charAt(new Date().getDay())
            this.month=check(month);
            this.day=check(day);
            this.hour=check(hour);
            this.minute=check(minute);
            this.second=check(second);
            function check(i){
                const num = (i<10)?("0"+i) : i;
                return num;
            }
            this.nowDate = {
              year:year,
              month:month,
              day:day,
              xinqi:xinqi
            }
            this.nowTime = {
              hour:hour,
              minute:minute,
              second:second
            }

        },
}



}
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .time_box_detailinfo {
    width: 760px;
    height: 280px;
    background: url(../../assets/time_bg.png) no-repeat;
    border: 1px solid #BFD9FF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    .time_date {
    padding: 42px;
      .region {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      margin-bottom: 25px;

}
      .time {
      display: flex;
      align-items: center;
        .hour_box,.minute_box,.seconds_box{
        width: 68px;
        height: 68px;
        background: #00A5FF;
        box-shadow: 0px 13px 24px 0px rgb(3 136 209 / 20%);
        border-radius: 10px;
        font-size: 40px;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        line-height: 68px;
        }
        span{
        font-size: 34px;
        font-weight: bold;
        color: #3589FF;
        display: block;
        margin: 0 10px;
        width: 12px;
        }
}
    
              }
      .detail_info {
      width: 351px;
      background: rgba(255,255,255,0.5);
      box-shadow: 0px 10px 20px 0px rgb(65 157 211 / 34%);
      border-radius: 10px;
      padding: 10px 20px 15px 20px;
      box-sizing: border-box;
      margin-right: 27px;
        p {
        font-size: 14px;
        font-weight: 500;
        color: #309DDB;
        line-height: 30px;
        display: flex;
        align-items: flex-start;
}
}
}
}
</style>